<script setup>
import { ref, reactive, onMounted, toRefs, watch, nextTick, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { store } from '@/js/store.js';
import { topage } from "@/js/hashRouter.js";

// 自定义组件名称（默认文件名）
defineOptions({ name: 'articles' });

const props = defineProps({
    hashName: String,
    pageParams: Object,
    xuanze: Boolean,
    formData: {
        type: Object,
        default: () => { }
    }
});
//需要响应式时使用toRefs
const { formData } = toRefs(props);
console.log('接收路由参数：', props.pageParams);
//向父级传递消息
const emits = defineEmits(['tohost'])
function sendEmit() {
    emits('tohost', ...arguments);
}
//组件暴露自己的属性
//defineExpose({
//    init,
//});

const rowsData = ref([]);
const listMeta = reactive({ page: 1, size: 10 })
const search = ref({ name: '' });

async function getList(_page) {
    if (_page) {
        listMeta.page = _page;
    }
    try {
        //const result = await api.get({ ...listMeta, ...search.value });
        // rowsData.value = result.data;
        // listMeta.count = result.meta.count;
        // listMeta.total = Math.ceil(result.meta.count / listMeta.size);
    } catch (error) {
    }
}

//添加、修改
const dialog = ref(false);
const dialogTitle = ref('');
const method = ref('add');
function rowsAdd() {
    method.value = 'add';
    dialogTitle.value = '添加';
    formData.value = {};
    dialog.value = true;
}
function rowsEdit(row) {
    method.value = 'edit';
    dialogTitle.value = '修改';
    formData.value = JSON.parse(JSON.stringify(row));
    dialog.value = true;
}


const multipleSelection = ref([])
function handleSelectionChange(val) {
    multipleSelection.value = val
}
function seleDel() {
    if (multipleSelection.value.length == 0) {
        ElMessage.error({ message: '请选择删除项！' })
        return;
    }
    var id = multipleSelection.value.map(e => e.id)
    delData(id)
}

// 删除
function delData(id) {
    console.log("🚀 ~ delData ~ id:", id)
}

onMounted(() => {
    getList(1);
})
onUnmounted(() => {
})
//监听变化
watch(() => props.formData, (newVal, oldValue) => {
    if (newVal && newVal.id) {
        //find()
    }
})


//------------------------检索
// 搜索
function souSubmit() {
    getList(1);
}

function newpage() {
    topage('/frame/home/articles/pid='+(Date.now()/1000), { pTitle:'编辑文章', msg:'这是传递额外路由参数', id: 101 })
}

</script>
<template>

    <div class="wrapper">
        <el-card style="margin: 5px auto;" v-if="!xuanze">
            <el-popconfirm :title="'确定删除' + multipleSelection.length + '条数据？'" icon-color="red" @confirm="seleDel()">
                <template #reference>
                    <el-button type="danger" plain>批量删除</el-button>
                </template>
            </el-popconfirm>
            <el-button type="warning" plain @click="rowsAdd()">添加</el-button>
            <el-input v-model="search.name" placeholder="请输入检索名称" @keyup.enter.native="souSubmit" clearable
                style="width: 200px;"></el-input>
            <el-button type="primary" plain @click="souSubmit">查询</el-button>
            <hr />
            <el-button type="primary" plain @click="newpage">新开本页 传递pid</el-button>
        </el-card>

        <el-table ref="multipleTable" :data="rowsData" size="default" style="width: 100%"
            @selection-change="handleSelectionChange" stripe>
            <el-table-column type="selection" width="55" fixed v-if="!xuanze"></el-table-column>
            <el-table-column property="id" label="ID"></el-table-column>
            <el-table-column property="name" label="模板名"></el-table-column>

            <el-table-column label="操作" fixed="right" width="260" v-if="!xuanze">
                <template #default="scope">
                    <el-button size="small" @click="rowsEdit(scope.row)">修改</el-button>
                    <el-popconfirm title="确定删除?" icon-color="red" @confirm="delData(scope.row.id)">
                        <template #reference>
                            <el-button size="small"><span style="color: var(--el-color-danger)">删除</span></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" v-if="xuanze">
                <template #default="scope">
                    <el-button size="small" type="warning" @click="sendEmit(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- <div class="pagination">
            <el-pagination background layout="total, prev, pager, next" :current-page="listMeta.page"
                :total="listMeta.count" :page-size="listMeta.size" class="right"
                @current-change="getList"></el-pagination>
            <hr>
        </div> -->

        <!-- 修改 & 新增 -->
        <el-drawer v-model="dialog" :title="dialogTitle" direction="btt" size="96%" class="mydrawer" :with-header="false">
            <div>TEST</div>
        </el-drawer>
    </div>

</template>
<style scoped></style>